<template>
  <div class="order_list">
    <van-panel>
      <div
        slot="header"
        style="position: relative; padding: 8px 16px 16px 16px; font-size: 11px"
      >
        <span
          style="
            position: absolute;
            top: 27px;
            right: 16px;
            color: #7d7e80;
            font-size: 9px;
          "
          v-show="orderList.orderStatusText == '订单取消，退款中'"
          >3个工作日内原路退回</span
        >
      </div>

      <div class="van-card">
        <div class="van-card__header">
          <a class="van-card__thumb">
            <div class="van-image" style="width: 100%; height: 100%">
              <img
                :src="orderList.picUrl"
                class="van-image__img"
                style="object-fit: cover"
              />
            </div>
          </a>
          <div class="van-card__content" style="justify-content: space-between">
            <div>
              <div
                class="van-card__title van-multi-ellipsis--l2"
                style="display: flex; justify-content: space-between"
              >
                <div>{{ orderList.name }}</div>
                <!-- <div class="van-card__num">x{{ orderList.number }}</div> -->
              </div>
              <div>
                <div class="desc">
                  <span
                    class="
                      van-tag van-tag--plain van-tag--default
                      van-hairline--surround
                    "
                    style="margin-right: 6px"
                    >{{ orderList.keywords }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="display: flex; padding-left: 98px; margin-top: 5px"
          v-if="
            orderList.giftGoods !== undefined && orderList.giftGoods.length > 0
          "
        >
          <span
            style="font-weight: bold; color: #000; float: left; font-size: 11px"
            >赠品</span
          >
          <div
            style="
              margin-left: 6px;
              display: flex;
              flex-direction: column;
              font-size: 11px;
              width: calc(100% - 30px);
            "
          >
            <!-- <div
              style="width: 100%; line-height: 16px"
              v-for="(gift, index) in goods.giftGoods"
              :key="index"
            >
              <span
                style="
                  width: calc(100% - 18px);
                  float: left;
                  display: inline-block;
                  text-align: left;
                  display: inline-block;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ gift.giftName }}</span
              ><span style="float: right; margin-left: 5px"
                >*{{ gift.num * goods.number }}</span
              >
            </div> -->
          </div>
        </div>
      </div>
      <div class="total">单价: {{ (orderList.retailPrice * 100) | yuan }}</div>

      <div slot="footer" class="footer_btn" style="height: 32px">
        <span
          style="color: #db3d3c; position: absolute; top: 8px; left: 16px"
          >{{ orderList.orderStatusText }}</span
        >
      </div>
    </van-panel>

    <!-- 拼人 -->
    <div style="width: 100%; margin-top: 20px">
      <!-- 头像 -->
      <div
        style="
          display: flex;
          align-items: center;
          width: 50%;
          margin: auto;
          justify-content: center;
        "
      >
        <div style="position: relative">
          <p
            style="
              position: absolute;
              top: -13%;
              left: -18%;
              padding: 1px 4px;
              border-radius: 10px;
              color: #bb6a00;
              margin: 0;
              background: #fdab3a;
              border: 1px solid #fdf9e3;
            "
          >
            拼主
          </p>
          <img
            :src="spell_people.shareUrl"
            alt=""
            style="
              width: 3rem;
              height: 3rem;
              border: 2px solid #fbf9d7;
              border-radius: 50px;
            "
          />
        </div>
        <p style="width: 10%; height: 1px"></p>
        <img
          :src="spell_people.shareUrl"
          alt=""
          style="
            width: 3rem;
            height: 3rem;
            border: 2px dotted #cccccc;
            border-radius: 50px;
          "
        />
      </div>
      <!-- 规格 -->
      <div style="text-align: center; color: #c2c2c2">
        拼主所选规格：{{ 'Specifications wait to be added ' }}
      </div>
      <div style="text-align: center; padding: 10px 0px">
        仅剩 <span style="color: red">1</span> 个名额 &nbsp;
        <span v-if="countdown"
          >{{ day }}天{{ hour }}时{{ min }}分{{ second }}秒</span
        >
        <span style="color: red; margin-left: 10px" v-if="!countdown"
          >已过期！</span
        >
      </div>
      <div style="text-align: center; width: 100%" @click="sponsor()">
        <p
          style="
            width: 70%;
            background: rgb(234 53 39);
            margin: auto;
            padding: 8px 4px;
            color: #fff;
            margin-top: 9%;
            border-radius: 4px;
          "
        >
          参与{{ spell_people.userName }}的拼单，省钱拿！
        </p>
      </div>
    </div>

    <div
      @click="sList()"
      v-if="!checkedAddress"
      style="
        width: 100%;
        background: white;
        height: 100px;
        text-align: center;
        padding-top: 10px;
        position: fixed;
        bottom: 0.1px;
      "
    >
      <img :src="aress" alt="" width="30px" height="30px" />
      <p style="color: #8a8a8a">请选择收货地址</p>
    </div>
    <van-cell-group
      @click="sList()"
      v-if="checkedAddress"
      style="position: fixed; bottom: 0.1px; width: 100%"
    >
      <van-cell isLink title="收货地址">
        <div slot="label">
          <div>
            <span>{{ adress.name }} </span>
            <span>{{ adress.addressDetail }} </span>
          </div>
          <div>
            {{ mobile }}
          </div>
        </div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { collage, authInfo, purchaseDetails, cartFastAdd } from '@/api/api';
import _ from 'lodash';
import aress from '@/assets/images/aress.png';
import { Tab, Tabs, Panel, Card, List, Tag, Dialog, Toast } from 'vant';
import {
  getLocalStorage,
  setLocalStorage,
  removeLocalStorage,
} from '@/utils/local-storage';

export default {
  name: 'pinshare',

  props: {
    active: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      day: '',
      aress,
      countdown: true,
      checkedAddress: true,
      nativePlace: '',
      adress: '',
      hour: '',
      min: '',
      link: '',
      addressId: '',
      second: '',
      activeIndex: Number(this.active),
      spell_people: '',
      orderList: '',
      grouId: '',
      mobile: '',
    };
  },
  created() {
    this.init();
    authInfo().then((res) => {
      this.mobile = res.data.data.mobile;
    });
  },

  methods: {
    sList() {
      this.showSku = false;
      this.$router.push('/user/address');
    },
    init() {
      collage({
        orderId: 11782,
      })
        .then((res) => {
          this.orderList = res.data.data.goods;
          this.spell_people = res.data.data.groupon;
          this.grouId = res.data.data.rules.id;
          let expireTime = res.data.data.rules.expireTime;
          if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            expireTime = expireTime.replace(/\-/g, '/');
            this.countTime(expireTime);
          } else if (/(Android)/i.test(navigator.userAgent)) {
            this.countTime(expireTime);
          }

          let str = window.location.href;
          let num = str.indexOf('#'); //取得整个地址栏
          this.link = str.substr(num + 1);

          this.$wxShare({
            title: this.orderList.name,
            desc: `参与${this.spell_people.userName}的拼单，省钱更省心！`,
            link: this.link,
            imgUrl: this.orderList.picUrl,
          });

          //console.log(JSON.stringify(this.orderList));
        })
        .then(() => {
          purchaseDetails({ grouponId: Number(this.grouId) }).then((res) => {
            if (res.data.data.litemallAddress == undefined) {
              this.checkedAddress = false;
            } else {
              this.adress = res.data.data.litemallAddress;
              this.addressId = this.adress.id;
              this.checkedAddress = true;
            }
            // console.log(res.data.data, 890);
          });
        });
    },

    sponsor() {
      if (this.mobile == undefined) {
        Toast('请登录后购买!');
        setTimeout(() => {
          this.$router.push(`/check`);
        }, 1000);
        return;
      }
      cartFastAdd({
        number: 1,
        type: 2,
        groupState: true,
        addressId: this.addressId,
      }).then((res) => {});
    },

    // 倒计时
    countTime(time) {
      let date = new Date();
      let now = date.getTime();
      let endDate = new Date(time);
      let end = endDate.getTime();
      let leftTime = end - now;
      if (leftTime >= 0) {
        // 天
        this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        // 时
        let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
        this.hour = h < 10 ? '0' + h : h;
        // 分
        let m = Math.floor((leftTime / 1000 / 60) % 60);
        this.min = m < 10 ? '0' + m : m;
        // 秒
        let s = Math.floor((leftTime / 1000) % 60);
        this.second = s < 10 ? '0' + s : s;
      } else {
        this.day = 0;
        this.hour = '00';
        this.min = '00';
        this.second = '00';
        this.countdown = false;
      }
      // 等于0的时候不调用
      if (
        Number(this.hour) === 0 &&
        Number(this.day) === 0 &&
        Number(this.min) === 0 &&
        Number(this.second) === 0
      ) {
        return;
      } else {
        setTimeout((time) => {
          this.countTime(this.expireTime);
        }, 1000);
      }
    },
  },
  components: {
    [Dialog.name]: Dialog,
    [Tab.name]: Tab,
    [Toast.name]: Toast,
    [Tabs.name]: Tabs,
    [Panel.name]: Panel,
    [Card.name]: Card,
    [List.name]: List,
    [Tag.name]: Tag,
  },
};
</script>

<style lang="scss" scoped>
/deep/ .van-tabs__nav--line {
  position: fixed;
  z-index: 100;
  padding-bottom: 0;
  height: 44px;
  width: 100%;
}

.van-tabs__nav {
  margin: 0;
}
.order_list {
  // .van-panel {
  //   margin-top: 20px;
  // }

  .van-card:not(:first-child) {
    margin-top: 5px;
    padding: 8px 16px;
  }

  .van-card {
    padding: 0 16px 8px 16px;
    background-color: #fff;
  }

  .total {
    text-align: right;
    padding: 10px;
  }

  .footer_btn {
    text-align: right;
    .van-button {
      margin-left: 10px;
    }
  }
}
</style>

